<template>
  <div>
    <el-header>
      <Navbar />
    </el-header>
    <el-main>
      <h1>用户信息</h1>
      <el-card>
        <h2>{{ user.name }}</h2>
        <p>邮箱: {{ user.email }}</p>
        <p>手机号: {{ user.phone }}</p>
      </el-card>
      <h2>收藏的餐厅</h2>
      <el-row>
        <el-col v-for="restaurant in user.favoriteRestaurants" :key="restaurant.id" :span="8">
          <el-card>
            <h3>{{ restaurant.name }}</h3>
          </el-card>
        </el-col>
      </el-row>
      <h2>历史操作记录</h2>
      <el-list>
        <el-list-item v-for="action in user.history" :key="action.id">
          <p>{{ action.description }}</p>
        </el-list-item>
      </el-list>
    </el-main>
  </div>
</template>

<script>
import Navbar from '../components/Navbar.vue';

export default {
  components: { Navbar },
  data() {
    return {
      user: {
        name: '张三',
        email: 'zhangsan@example.com',
        phone: '123456789',
        favoriteRestaurants: [
          { id: 1, name: '餐厅A' },
          { id: 2, name: '餐厅B' },
        ],
        history: [
          { id: 1, description: '收藏了餐厅A' },
          { id: 2, description: '评论了餐厅B' },
        ],
      },
    };
  },
};
</script>

<style scoped>
.el-card {
  margin-bottom: 20px;
}
</style>